<template>
	<view class="container-white" v-if="topicList.length > 0">
		<view class="menu flex-box">
			<view>
				<image class="menu-icon" src="../../static/icon/icon-time.png" />
				<view>{{remainingTime}}</view>
			</view>
			<view @click="goScantron">
				<image class="menu-icon" src="../../static/icon/icon-datika.png" />
				<view>答题卡</view>
			</view>
			<view @click="hidden = true">
				<image class="menu-icon" src="../../static/icon/icon-jiaojuan.png" />
				<view>交卷</view>
			</view>
		</view>
		<view class="head flex-box" style="padding:20upx;">
			<view>
				<text v-if="topicList[idx].quesType == 1">单选题</text>
				<text v-if="topicList[idx].quesType == 2">多选题</text>
				<text v-if="topicList[idx].quesType == 3">判断题</text>
				<text>（{{idx+1}}/{{topicList.length}}）</text>
			</view>
		</view>

		<view class="topic-box">
			<rich-text v-if="topicList[idx].info" :nodes="topicList[idx].info" class="questions"></rich-text>
			<view class="answer" v-if="topicList.length">
				<view class="options" v-for="(item,index) in topicList[idx].questionOptionEntities" @click="checkOptions(index)"
				 :key="index">
					<view v-if="topicList[idx].quesType !==3" class="stide" :class="item.checked === true?'isCheck':''">{{item.key}}</view>
					<view v-else class="stide" :class="item.checked === true?'isCheck':''"></view>
					<view style="flex:1">{{item.option}}</view>
				</view>
			</view>
			<view hidden="true">{{count}}</view>
		</view>

		<view class="footer">
			<button v-if="idx" type="primary" class="primary footer-btn" @click="goPrevious">上一题</button>
			<view v-if="idx" class="cut-off"></view>
			<button v-if="idx < topicList.length-1" type="primary" class="primary footer-btn" @click="goNext">下一题</button>
			<button v-if="idx == topicList.length-1" type="primary" class="primary footer-btn" @click="hidden = true">交卷并查看结果</button>
		</view>

		<model v-if="hidden">
			<view class="model-content">交卷后将结束本次考试，确定交卷吗？</view>
			<view class="model-footer">
				<button class="model-footer-btn cancel" @click="cancel">取消</button>
				<button type="primary" class="model-footer-btn primary" @click="finishTopic">交卷</button>
			</view>
		</model>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		formatSeconds,
		setNavTitle
	} from '../../common/common'
	export default {
		data() {
			return {
				idx: 0,
				topicList: [],
				topic: {},
				totalCount: 0,
				hidden: false,
				count: 0,
				examId: null,
				examType: '',
				duration: 0,
				remainingTime: null,
				compType: null,
				courseId: '',
				second: '',
			}
		},
		onLoad(options) {
			this.courseId = options.courseId
			uni.setStorageSync('examIndex', 0)
			this.title = options.name
			this.examId = options.id
			this.duration = options.duration
		},
		onShow() {
			this.getExam()
			this.idx = uni.getStorageSync('examIndex')
			setNavTitle(this.title)
		},
		onBackPress() {
			this.hidden = true
			return true
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			// 获取考试
			getExam() {
				const params = {
					examId: this.examId,
					userId: uni.getStorageSync('userId')
				}
				post_md5('/train-app/courseexam/queslist', params).then(res => {
					// this.examScoreId = res.data.examScoreId
					this.topicList = res.data.quesList
					this.remainingTime = res.data.examInfo.duration
					this.totalCount = res.data.quesList.length
					this.topicList.forEach(x => {
						x.questionOptionEntities.forEach((item, index) => {
							if (item.option == '') {
								x.questionOptionEntities.splice(index, 1)
							}
						})
					})
					this.remainingTime = formatSeconds(this.remainingTime)
					this.second = res.data.examDuration
					if (this.timer) {
						clearInterval(this.timer)
						this.timer = null
					}
					this.timer = setInterval(() => {
						if (this.second > 0) {
							this.second--
							this.remainingTime = formatSeconds(this.second)
						} else {
							this.finishTopic()
						}
					}, 1e3)
				})
			},
			// 取消交卷
			cancel() {
				this.hidden = false
			},
			// 选择选项
			checkOptions(index) {
				this.count++
				if (this.topicList[this.idx].quesType === 2) {
					// this.topicList.questionOptionEntities[index].checked = !this.topicList.questionOptionEntities[index].checked
					this.topicList[this.idx].questionOptionEntities[index].checked = !this
						.topicList[this.idx].questionOptionEntities[index].checked
				} else {
					if (this.topicList[this.idx].questionOptionEntities.length) {
						this.topicList[this.idx].questionOptionEntities.forEach((_, i) => {
							this.topicList[this.idx].questionOptionEntities[i].checked =
								i === index
						})
					}
				}
				this.topicList[this.idx].userAnsw = this.topicList[
						this.idx
					].questionOptionEntities
					.filter(x => x.checked)
					.map(x => x.key)
					.sort()
					.join('')
				this.saveTopic()
			},
			// 下一题
			goNext() {
				uni.setStorageSync('examIndex', this.idx)
				if (this.topicList[this.idx].questionOptionEntities) {
					this.topic = this.topicList[this.idx]
				} else {
					this.getExam()
				}
				this.idx = this.idx + 1
			},
			// 上一题
			goPrevious() {
				this.idx = this.idx - 1
				uni.setStorageSync('examIndex', this.idx)
				if (this.topicList[this.idx].questionOptionEntities) {
					this.topic = this.topicList[this.idx]
				} else {
					this.getExam()
				}
			},
			saveTopic() {
				const params = {
					examId: this.examId,
					quesId: this.topicList[this.idx].quesId,
					userId: uni.getStorageSync('userId'),
					token: uni.getStorageSync('token'),
					selfAnsw: this.topicList[this.idx].questionOptionEntities
						.filter(x => x.checked)
						.map(x => x.key)
						.sort()
						.join(''),
					isDel: Number(this.topicList[this.idx].isDel)
				}
				for (let i in this.topicList[this.idx].optionsBeans) {
					if (this.topicList[this.idx].optionsBeans[i].checked) {
						params.answ += this.topicList[this.idx].optionsBeans[i].key
					}
				}
				post_md5('/train-app/courseexam/savequesrecord', params, false)
			},
			finishTopic() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				const params = {
					courseId: this.courseId,
					examId: this.examId,
					examQuesList: JSON.stringify(this.topicList.map(x => ({
						quesId: x.quesId,
						userAnsw: x.userAnsw
					}))),
					userId: uni.getStorageSync('userId')
				}
				post_md5('/train-app/courseexam/submitpaper', params).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.redirectTo({
							url: 'examination-result?id=' + res.data + '&tag=true' + '&examId=' + this.examId
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			// 查看答题卡
			goScantron() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				this.saveTopic()
				const params = {
					examScoreId: this.examScoreId,
					examId: this.examId,
					quesId: this.topicList.id,
					quesType: this.topicList.quesType,
					userId: uni.getStorageSync('userId'),
					examType: this.examType,
					answ: '',
					sort: this.topicList.sort
				}
				uni.navigateTo({
					url: 'scantrone?topicList=' + JSON.stringify(this.topicList) + '&params=' + JSON.stringify(params) + '&idx=' +
						this.totalCount + '&courseId=' + this.courseId
				})
			}
		}
	}
</script>

<style>
	.menu {
		display: flex;
		font-size: 22upx;
		/* font-weight: 400; */
		color: #333333;
		padding: 10upx 50upx;
		margin: 1px 0;
		border-bottom: 1px solid #EDEDED;
		text-align: center;
	}

	.menu-icon {
		width: 42upx;
		height: 42upx;
	}

	.topic-box {
		padding: 20upx;
		font-size: 28upx;
		font-weight: normal;
		color: #333333;
		line-height: 60upx;
	}

	.footer {
		height: 98upx;
		font-size: 28upx;
		background: #02a8f4;
	}
</style>
<style scoped>
	.isCheck {
		background: #02a8f4;
		color: #ffffff;
	}
</style>
